<!-- -->
<template>
  <div v-if="token" class="container">
      <div class="top-nav">
      <div class="nav-item">
        <div @click="dy" :class="[isDy?'item-text active':'item-text']">订阅课程</div>
        <div :class="[isDy?'item-dot active':'item-dot']"></div>
      </div>
      <div class="nav-item">
        <div @click="sc" :class="[isSc?'item-text active':'item-text']">收藏课程</div>
        <div :class="[isSc?'item-dot active':'item-dot']"></div>
      </div>
    </div>
    <div class="gray"></div>
    <div class="course-box">
      <div v-show="isSc" v-for="item in like"  @click.stop="goToCourseDetail(item&&item.id)" class="course-item">
        <div class="course-pic">
          <img :src="item&&item.thumb" alt="">
        </div>
        <div class="course-body">
          <div class="course-title">{{item&&item.title}}</div>
          <div class="follow-time">订阅时间 1个月前</div>
        </div>
      </div>
      <div v-show="isDy" v-for="item in follow"  @click.stop="goToCourseDetail(item&&item.id)" class="course-item">
        <div class="course-pic">
          <img :src="item&&item.thumb" alt="">
        </div>
        <div class="course-body">
          <div class="course-title">{{item&&item.title}}</div>
          <div class="follow-time">订阅时间 1个月前</div>
        </div>
      </div>
    </div>
    <div class="drop">
      <span>已经到底了</span>
    </div>
    <kp-foot-nav type="study"></kp-foot-nav>
  </div>
  <div v-else class="container">
    <div class="empty-box">
      <div class="image-item">
        <img src="http://h5.xiaomage.tech/static/img/img-placeholder.02168418.png" alt="">
      </div>
    </div>
    <div class="btn-login-box">
      <div @click="toRegister" class="btn-login">登录查看</div>
    </div>
    <kp-foot-nav type="study"></kp-foot-nav>
  </div>
</template>

<script>

import TechSupport from "@/components/TechSupport.vue";
import KPFootNav from "@/components/kp-foot-nav.vue";

export default {
  components: {
    TechSupport,
    "kp-foot-nav": KPFootNav,
  },
  data() {
    return {
      isDy: true,
      isSc: false,
      token: localStorage.getItem("h5-token")||"",
      like: [],
      follow: [],
      id: 0,
    };
  },
  computed: {},
  watch: {},
  methods: {
    goToLogin: function () {
      this.$router.push({
        path: "login-password",
        query: {
          url: window.location.href,
        },
      });
    },
    dy:function(){
      this.isDy = true;
      this.isSc = false;
    },
    sc:function(){
      this.isDy = false;
      this.isSc = true;
    },
    goToCourseDetail(id) {
      this.$router.push({
        path: "/vod/detail",
        query: {
          id,
        },
      });
    },
    toRegister:function(){
      this.$router.push({
        path: '/register',
      })
    }
  },
  created(){},
  beforeCreate() {},
  async mounted() {
        let res1 = await this.$request.get("/api/v2/member/courses/like"
        ,{
          params: {
            page: 1,
            page_size: 10,
          },
        });
        this.like = res1.data.data;
        console.log(this.like);

         let res2 = await this.$request.get("/api/v2/member/courses"
        ,{
          params: {
            page: 1,
            page_size: 10,
          },
        });
        this.follow = res2.data.data;
    },
  beforeMount() {}, 
  beforeUpdate() {},
  updated() {}, 
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang='less' scoped>
.container {
  position: absolute;
  left: 0;
  top: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  .top-nav {
    width: 100%;
    height: auto;
    float: left;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 999;
    display: flex;
    padding-top: 17px;
    padding-bottom: 8px;
    background-color: #fff;
    .nav-item {
      flex: 1;
      position: relative;
      .item-text.active {
        color: #333;
        font-weight: 600;
      }
      .item-text{
        width: 100%;
        height: auto;
        float: left;
        font-size: 16px;
        font-weight: 400;
        color: #666;
        line-height: 16px;
        text-align: center;
        padding-bottom: 9px;
      }
      .item-dot.active {
        background-color: #3ca7fa;
      }
      .item-dot {
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -5px;
        width: 10px;
        height: 3px;
        background: #fff;
        border-radius: 2px;
      }
    }
  }
  .gray {
    float: left;
    width: 100%;
    height: 10px;
    background: #f3f6f9;
  }
  .course-box {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 15px;
    .course-item {
      width: 100%;
      height: auto;
      float: left;
      margin-bottom: .533333rem;
      display: flex;
      .course-pic{
        margin-right: 10px;
        img {
          width: 120px;
          height: 90px;
          border-radius: 4px;
        }
      }
    }
    .course-body {
      flex: 1;
      padding-top: 5px;
      .course-title {
        width: 100%;
        height: 40px;
        float: left;
        font-size: 15px;
        font-weight: 500;
        color: #171923;
        line-height: 20px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 22px;
      }

      .follow-time {
        width: 100%;
        height: auto;
        float: left;
        font-size: 12px;
        font-weight: 400;
        color: #999;
        line-height: 12px;
      }
    }
  }

  .drop {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: #ccc;
    font-size: 14px;
    margin-top: .266667rem;
    margin-bottom: .266667rem;
    img {
    }

    span {
      display: inline-block;
      width: 100%;
      text-align: center;
      color: #ccc;
      font-size: 14px;
      margin-top: .266667rem;
      margin-bottom: .266667rem;
    }
  }

  div.empty-box {
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
    div.image-item {
      display: inline-block;
      img {
        width: 120px;
        height: 120px;
      }
    }
  }

  div.btn-login-box {
    width: 100%;
    height: auto;
    float: left;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
    div.btn-login {
      width: 100%;
      height: 46px;
      box-sizing: border-box;
      line-height: 46px;
      background: #3ca7fa;
      border-radius: 4px;
      float: left;
      text-align: center;
      color: #fff;
      font-size: 16px;
      font-weight: 500;
    }
  }
}
</style>